<template>
  <div id="nav-box" ref="navBox">
    <h1 class="title">导航设置</h1>
    <div class="main-cont">
      <!-- 工具栏 -->
      <v-toolbar @click="handleToolClick"></v-toolbar>
      <div class="nav-list mt10">
        <div class="list-header">
          <ul>
            <li>图标</li>
            <li>导航名称</li>
            <li>布局名称</li>
            <li>设置</li>
          </ul>
        </div>
        <div class="list-cont" :style="{ height: `${height}px` }" v-loading="tableLoading">
          <div class="item"
          v-for="(item, index) in navList"
          :key="index" v-dragging="{ item:item, list:navList, group: item }">
              <ul>
                <li><img :src="item.ImageUrl" alt="" style="width: 40px; height: 40px"></li>
                <li>{{ item.Title }}</li>
                <li>{{ item.LayoutTitle}}</li>
                <li>
                  <el-button
                    @click.native.prevent="editNav(item, index)"
                    type="text"
                    size="mini">修改</el-button>
                  <el-button
                    @click.native.prevent="deleteNav(item)"
                    type="text"
                    size="mini">删除</el-button>
                </li>
              </ul>
          </div>
        </div>
      </div>
      <!-- <i-pagination :pageSize="pageSize" :currentPage="currentPage" :pageTotal="pageTotal" v-if="pageTotal > pageSize"></i-pagination> -->
    </div>
    <!-- 新增/编辑弹窗 -->
    <v-dialog
      :title="editMode === 'ADD' ? '新建导航':'修改导航'"
      name="addDialog"
      :isVisible="editDialogShow"
      @close="closeDialog">
      <template slot="dialog-cont">
        <el-form :model="navForm" ref="navForm" :rules="rules" class="dialog-main dialogForm">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="导航名称" prop="Title">
                <el-input v-model="navForm.Title" placeholder="请输入导航名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="导航ID" prop="Id">
                <el-input v-model="navForm.Id" placeholder="请输入导航ID" :disabled="editMode === 'ADD' ? false:true"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="字体颜色" prop="FontColor">
                <el-input v-model="navForm.FontColor" placeholder="请输入字体颜色"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选中时的字体颜色" prop="SelectedFontColor">
                <el-input v-model="navForm.SelectedFontColor" placeholder="请输入选中时的字体颜色"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="布局选择" prop="LayoutId">
                <el-select v-model="navForm.LayoutId" @change="selectGet" popper-class="zIndex-popper" placeholder="请输入选择布局">
                  <el-option v-for="(item, index) in layoutList"
                  :key="index"
                  :value="item.Id"
                  :label="item.Title">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否显示顶部标题栏">
                <el-checkbox label="显示顶部标题栏" v-model="checked" @change="checkedChange" name="type"></el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="导航图标" prop="ImageUrl">
                <v-upload title="选择图标" type="icon" :picUrl="navForm.ImageUrl" @change="handlePicChange"></v-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选中时的导航图标" prop="SelectedImageUrl">
                <v-upload title="选择图标" type="selIcon" :picUrl="navForm.SelectedImageUrl" @change="handlePicChange"></v-upload>
              </el-form-item>
            </el-col>
            <el-col v-if="checked" :span="12">
              <el-form-item label="布局顶部logo" prop="LayoutTitle">
                <v-upload title="选择图标" type="logo" :picUrl="navForm.LayoutTitle" @change="handlePicChange"></v-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template slot="dialog-btns">
        <div class="form-buttons">
          <el-button @click="resetForm" size="mini">重置</el-button>
          <el-button @click="closeDialog('addDialog')" size="mini">关闭</el-button>
          <el-button type="primary" @click="submitForm" size="mini">确定</el-button>
        </div>
      </template>
    </v-dialog>
  </div>
</template>
<script>
import VToolbar from '../../comm/iToolbar/iToolbar'
import VDialog from '../../comm/iDialog/iDialog'
import VUpload from '../../comm/iUpload/iUpload'
import api from '../../../../api/url'
import ajax from '../../../../api/ajax/ajax'
import { checkColor } from '../../js/rules'
export default {
  name: 'navManage',
  components: {
    VToolbar,
    VDialog,
    VUpload
  },
  data () {
    return {
      editMode: 'ADD',
      editDialogShow: false,
      height: null,
      navList: [],
      checked: false,
      navForm: {
        FontColor: '',
        SelectedFontColor: '',
        Title: '',
        Id: '',
        LayoutTitle: '',
        LayoutId: '',
        ImageUrl: '',
        SelectedImageUrl: ''
      },
      navData: {},
      rules: {
        Title: [
          { required: true, message: '请输入导航名称', trigger: 'blur' }
        ],
        Id: [
          { required: true, message: '请输入导航Id', trigger: 'blur' }
        ],
        LayoutId: [
          { required: true, message: '请选择布局', trigger: 'change' }
        ],
        ImageUrl: [
          { required: true, message: '请选择导航图标', trigger: 'change' }
        ],
        LayoutTitle: [
          { required: false, message: '请选择顶部logo', trigger: 'change' }
        ],
        FontColor: [
          { validator: checkColor, trigger: 'blur' }
        ],
        SelectedFontColor: [
          { validator: checkColor, trigger: 'blur' }
        ]
      },
      tableLoading: true,
      layoutList: []
    }
  },
  methods: {
    // 工具栏操作
    handleToolClick (oprType) {
      switch (oprType) {
        case 'add':
          this.addNav()
          break
        default:
          break
      }
    },
    // 排序
    sortFun (data) {
      let postData = {
        Ids: data
      }
      ajax.post(api.NAV_SORT, postData).then(res => {
        if (res.Code !== 0) {
          console.info('接口出错,传递参数可能不对')
        }
      }).catch(err => {
        console.info(err)
      })
    },
    // 导航列表查询
    getNavList () {
      ajax.get(api.QUERY_NAVS_LIST).then(res => {
        this.navList = res
        this.tableLoading = false
      }).catch(err => {
        console.info(err)
      })
    },
    // 新增导航
    addNav () {
      this.editMode = 'ADD'
      this.editDialogShow = true
    },
    // 编辑导航
    editNav (data) {
      let getData = {
        id: data.Id
      }
      ajax.get(api.QUERY_NAV_DETAIL, getData).then(res => {
        this.navForm = JSON.parse(JSON.stringify(res))
        this.navData = JSON.parse(JSON.stringify(res))
      })
      this.dataIsChecked(data.LayoutTitle)
      this.editMode = 'EDIT'
      this.editDialogShow = true
      this.$nextTick(() => {
        this.$refs.navForm.resetFields()
      })
    },
    // 删除导航
    deleteNav (data) {
      this.$confirm('确定要删除该导航吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let deletVal = api.DELETE_NAV + '?id=' + data.Id
        ajax.get(deletVal).then(res => {
          if (res.Code === 0) {
            this.$message({
              type: 'success',
              message: '导航删除成功'
            })
            this.getNavList()
          }
        })
      }).catch(err => {
        console.info(err)
      })
    },
    // 修改时当勾选框从勾选状态到取消状态时
    checkedChange (value) {
      if (value === false) {
        this.rules.LayoutTitle[0].required = false
        if (this.navForm.LayoutId) {
          let titVal = this.layoutList.find(item => {
            return this.navForm.LayoutId === item.Id
          })
          this.navForm.LayoutTitle = titVal.Title
        }
      } else {
        if (!(/^\/.*$/.test(this.navForm.LayoutTitle))) {
          this.navForm.LayoutTitle = ''
        }
        this.rules.LayoutTitle[0].required = true
      }
    },
    // 判断是否选中
    dataIsChecked (title) {
      if (/^\/.*$/.test(title)) {
        this.checked = true
        this.rules.LayoutTitle[0].required = true
      } else {
        this.checked = false
        this.rules.LayoutTitle[0].required = false
      }
    },
    // 获取选择器下的label值
    selectGet (lab) {
      let obj = {}
      obj = this.layoutList.find((item) => {
        return item.Id === lab
      })
      if (!this.checked) {
        this.navForm.LayoutTitle = obj.Title
      }
    },
    // 请求下拉选择框
    getSelectVale () {
      ajax.get(api.QUERY_LAYOUT_LIST).then(res => {
        this.layoutList = res
      }).catch(err => {
        console.info(err)
      })
    },
    // 初始化表单
    initForm (formName) {
      this.$refs[formName].resetFields()
      this.navForm = {
        FontColor: '',
        SelectedFontColor: '',
        Title: '',
        Id: '',
        LayoutTitle: '',
        LayoutId: '',
        ImageUrl: '',
        SelectedImageUrl: ''
      }
      this.checked = false
    },
    // 重置表单域
    resetForm () {
      this.initForm('navForm')
      if (this.editMode === 'EDIT') {
        this.navForm = {...this.navData}
        this.dataIsChecked(this.navForm.LayoutTitle)
      }
    },
    // 关闭弹窗
    closeDialog (name) {
      switch (name) {
        case 'addDialog':
          this.initForm('navForm')
          this.editDialogShow = false
          break
        default:
          break
      }
    },
    // 发送请求封装
    postAjaxFun (linkD, navFormData, titleStatus) {
      ajax.post(linkD, navFormData).then(res => {
        if (res.Code === 0) {
          if (titleStatus === 'ADD') {
            this.$message({
              type: 'success',
              message: '导航创建成功'
            })
          } else {
            this.$message({
              type: 'success',
              message: '导航修改成功'
            })
          }
          this.closeDialog()
          this.getNavList()
        }
      }).catch(err => {
        console.info(err)
      })
    },
    // 处理图片选择
    handlePicChange (data) {
      switch (data.type) {
        case 'icon':
          this.navForm.ImageUrl = data.url
          break
        case 'selIcon':
          this.navForm.SelectedImageUrl = data.url
          break
        case 'logo':
          this.navForm.LayoutTitle = data.url
          break
        default:
          break
      }
    },
    // 提交表单
    submitForm () {
      this.$refs.navForm.validate((valid) => {
        if (valid) {
          this.selectGet(this.navForm.LayoutId)
          let postData = JSON.parse(JSON.stringify(this.navForm))
          if (this.editMode === 'ADD') {
            this.postAjaxFun(api.ADD_NAV, postData, this.editMode)
            this.closeDialog('addDialog')
          } else {
            this.postAjaxFun(api.EDIT_NAV, postData, this.editMode)
            this.closeDialog('addDialog')
          }
        } else {
          return false
        }
      })
    }
  },
  mounted () {
    this.$dragging.$on('dragged', ({ value }) => {
      this.sortList = JSON.parse(JSON.stringify(value))
    })
    this.$dragging.$on('dragged', () => {
      let sortList = JSON.parse(JSON.stringify(this.sortList.list))
      if (sortList.length > 0) {
        let sortListIds = sortList.map((item) => {
          return {
            Id: item.Id
          }
        })
        this.sortFun(sortListIds)
      }
    })
  },
  created () {
    this.$nextTick(() => {
      this.height = this.$refs.navBox.offsetHeight - 187
    })
    this.getNavList()
    this.getSelectVale()
  }
}
</script>
<style lang="stylus">
#nav-box
  height 100%
  overflow hidden
  .title
    height 60px
    padding 15px
    line-height 30px
    font-size 18px
    font-weight normal
    background #fff
  .mt10
    margin-top 10px
  .main-cont
    padding 10px 0 0 10px
  .nav-list
    overflow hidden
    .list-header
    .list-cont
      overflow auto
      ul
        display table
        width 100%
        border-collapse collapse
        table-layout fixed
        li
          display table-cell
          vertical-align middle
          line-height 24px
          padding 10px
          text-align center
    .list-header, .list-cont .item
      margin-bottom 5px
      background #fff
      border-radius 3px
      box-shadow 0 0 5px rgba(245, 245, 245, 0.3)
  .avatar-uploader .el-upload
    border 1px dashed #d9d9d9
    border-radius 6px
    cursor pointer
    position relative
    overflow hidden
  .avatar-uploader .el-upload:hover
    border-color #016DFB
  .avatar-uploader-icon
    font-size 28px
    color #8c939d
    width 178px
    height 178px
    line-height 178px
    text-align center
  .avatar
    width 178px
    height 178px
    display block
  .must
    .el-form-item__label:before
      content '*'
      color #f56c6c
      margin-right 5px
</style>
